

// import { useCallback, useEffect, useState } from "react";
// import { useWebsocket } from '../../utils/hooks'
// import { Button, Col, Divider, message, Row } from "antd";



// const wsUrl = 'ws://localhost:8001'

// const WebSoc = () => {
//   const [socketData, setSocketData] = useState({})
//   const { messageData, readyState, closeWebSocket, reconnect, sendMessage } = useWebsocket({ url: wsUrl })
//   const [processNum, setProcessNum] = useState({ totalNum: undefined, successNum: undefined })
//   const onHandleSendMessage = useCallback(() => {
//     sendMessage(JSON.stringify({ isClose: webSocketStatus.START_MSG }))
//   }, [])

//   /**
//    * 监听msgData
//    */
//   useEffect(() => {
//     if (!!messageData) {
//       const msgData = JSON.parse(messageData)
//       const { status, des } = msgData
//       if (status !== 2000) {
//         message.error(des)
//         return
//       }
//       const { totalNum, successNum } = msgData

//       setProcessNum({
//         totalNum,
//         successNum
//       })
//     }
//   }, [messageData])


//   const onCanceleSendMessage = useCallback(() => {
//     sendMessage(JSON.stringify({ isClose: webSocketStatus.CANCEL_MSG }))
//     closeWebSocket()
//   }, [])

//   return (
//     <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
//       <h1>websocket测试</h1>
//       {processNum.totalNum && <h1>{processNum.successNum}/{processNum.totalNum}</h1>}
//       <Row>
//         <Col>
//           <Button onClick={onHandleSendMessage} type={'primary'} block>
//             发送消息
//           </Button>
//         </Col>
//       </Row>
//       <Row>
//         <Col>
//           <Col>
//             <Button onClick={onCanceleSendMessage} block danger type={'primary'}>关闭连接</Button>
//           </Col>
//         </Col>
//       </Row>
//     </div>
//   )
// }
// export default WebSoc

import { useEffect, useState, useRef, useCallback,  } from "react"
import { Button, Divider } from 'antd'



const WebSoc = props => {
  const ws = new WebSocket('ws://localhost:8001');
  const [msg, setMsg] = useState('无数据')
  useEffect(() => {
    if (window.WebSocket) {
      ws.onopen = function (e) {
        console.log("连接服务器成功");
      }

      ws.onerror = function () {
        console.log("连接出错");
      }
      // 接收服务器的消息
      ws.onmessage = function (e) {
        let message = "message:" + e.data + "";
        setMsg(message)
        console.log("接收服务器的消息:", message);
      }
    }
  }, [msg])
  const send = () => {
    // 向服务器发送消息
    ws.send("链接成功，what`s your name?");
    const param = ''
    console.log("xxxxxxxxxxxxx", param ?? 111);
  }
  const close = () => {
    ws.onclose = function (e) {
      console.log("服务器关闭");
    }
  }
  const Forms = () => {
    const [count, setCount] = useState(5);
    useEffect(() => {
      const newTimer = setInterval(() => {
        if (count > 0) {
          setCount((c) => c - 1);
        }
      }, 1000);
      return () => clearInterval(newTimer);
    }, [count]);
  
    return <div>{count}</div>;

  }

  return (
    <div>
      <Forms />
      <Divider />
      {
        <>
          {msg}
        </>
      }
      <Divider />
      <Button type={"primary"} onClick={send}> send </Button>
      <Button type={"danger"} onClick={close}> close </Button>
    </div>
  )
}
export default WebSoc